<script setup>
import { onMounted, ref, onUnmounted } from "vue"
import { addVisitAPI } from "@/api/web/index"

const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE
const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION

// 计算当前时间
const nowYear = new Date().getFullYear()

// 钟表表情
const clockFace = ["🕛", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚"]

// 获取当前时间
const getTime = () => {
  const date = new Date()
  let hour = date.getHours()
  if (hour > 11) {
    hour = hour - 12
  }
  return clockFace[hour]
}

// 上线时间
const onlineTime = new Date("2025-06-07 12:00:00")

// 计算当前距上线多久
const getTimeDiff = () => {
  // 计算当前时间
  const now = new Date()

  // 计算相隔多少天
  let day = Math.floor((now.getTime() - onlineTime.getTime()) / (1000 * 60 * 60 * 24))
  if (day < 10) {
    day = "0" + day
  }
  // 计算小时
  let hour = Math.floor((now.getTime() - onlineTime.getTime()) / (1000 * 60 * 60)) % 24
  if (hour < 10) {
    hour = "0" + hour
  }
  // 计算分钟
  let minute = Math.floor((now.getTime() - onlineTime.getTime()) / (1000 * 60)) % 60
  if (minute < 10) {
    minute = "0" + minute
  }
  // 计算秒
  let second = Math.floor((now.getTime() - onlineTime.getTime()) / 1000) % 60
  if (second < 10) {
    second = "0" + second
  }
  return {
    day,
    hour,
    minute,
    second
  }
}

// 计时器
const timer = ref()

// 时间差
const timeDiff = ref(getTimeDiff())

// 添加访问记录
const addVisit = async () => {
  const res = await addVisitAPI()
  // console.log(res)
  if (res.code == 200) {
    visitNum.value = res.data
  }
}

const visitNum = ref(0)

onMounted(() => {
  addVisit()
  timer.value = setInterval(() => {
    timeDiff.value = getTimeDiff()
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>
<template>
  <footer class="mt-60px bottom-0 left-0 z-20 w-full p-2 bg-white border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-600">
    <div class="max-w-screen-xl mx-auto md:flex md:items-center md:justify-between p-4">
      <div class="content">
        <div class="top">
          <div class="name">
            ©2025 - {{ nowYear }} By {{ VITE_APP_TITLE }} —— <span>@ {{ VITE_APP_VERSION }}</span>
          </div>
          <div class="viewNum"><span class="icon">🤩</span>本站访问量: {{ visitNum }}次</div>
          <div class="run">
            <span class="icon">{{ getTime() }} </span>本站居然运行了 {{ timeDiff.day }} 天{{ timeDiff.hour }} 小时 {{ timeDiff.minute }} 分
            {{ timeDiff.second }} 秒
          </div>
          <div class="viewNum">
            <span class="icon">
              <svg width="20" data-v-35553aad="" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="beian_svg">
                <path
                  data-v-35553aad=""
                  d="M97.9 389.3c7.1 4.2 13.1 10.1 19.8 15.1 9.5 7.1 19.1 14 28.4 20.9 14.3-31.5 27.9-61.6 42.2-92.9-22.1-3.9-44.7-8.2-67.5-11.5-3-0.4-8.2 3.7-9.9 7-6.9 13.3-12.8 27-19 40.6-3.9 8.6-3.1 15.4 6 20.8zM214.7 291.8c26.4-22.8 51.7-44.6 77.9-67.3-18.8-13-37.8-26.5-57.4-39.2-2.6-1.7-9.4-0.5-12.2 1.8-13.1 10.7-25.8 22.1-38.1 33.8-2.1 2-3.2 7.3-2 9.8 10.2 20.4 21 40.5 31.8 61.1zM339.4 201.9c28.9-8.4 57.8-16.9 86.8-25.1 7.4-2.1 6.4-5.5 3.4-10.6-10-17.1-19.3-34.6-30-51.2-2.2-3.5-9.5-6.6-13.5-5.7-15.6 3.5-30.9 8.4-46.1 13.4-2.8 0.9-6.3 5.1-6.4 7.8-0.5 23.4-0.3 46.9-0.3 70.4 4.7 0.8 5.5 1.2 6.1 1zM136.1 475.5c-2.9-0.6-4.1-1.2-5.1-0.9-19.5 5-39 9.9-58.3 15.7-2.9 0.9-6.1 6.6-6.2 10.1-0.3 17.3 0 34.6 1.2 51.8 0.3 3.6 4.7 9 8.1 9.9 19.7 5.2 39.8 9.3 60.2 13.9V475.5zM586 174.6c-1-13.8-1.3-27.7-3.6-41.2-5-30 2.5-25.5-28.9-30.8-3.7-0.6-7.4-1.3-11.1-1.9-26.4-4-26.6-4-37.4 20-7.3 16.2-13.7 32.7-20.4 48.7 34.3 4.9 67.2 9.5 101.5 14.4-0.1-2.8 0.1-6.1-0.1-9.2zM741.9 194c0.8-2.4-1.9-7.3-4.4-9.1-13.4-9.8-27-19.3-41-28-3-1.8-9.6-1.8-12.1 0.3-18 15.4-35.3 31.5-52.6 47.1 29.2 19.9 56.9 38.9 85.6 58.5 8.3-22.7 16.8-45.6 24.5-68.8zM504.2 862.8c8.1 17.4 16.2 35.5 25.2 53 1.5 2.9 7.5 5.6 10.9 5.1 17.9-2.9 35.8-6.3 53.4-10.8 3.6-0.9 7.8-7 8.3-11.2 1.6-12.6 1.7-25.4 2.2-38.2 0.2-6.5 0-13 0-19.2-34.2 7.3-66.3 14.1-100 21.3zM749.5 798.9c-5.6-13.5-11.2-27-16.7-40.3-28.6 21.9-55.7 42.7-83.5 64 16.4 13.7 31.6 26.9 47.6 39.2 2.6 2 9.6 1.3 12.9-0.8 11-6.8 21.4-14.6 31.7-22.4 18.1-13.5 18-13.6 9.6-34.3-0.7-1.6-0.9-3.6-1.6-5.4zM541.3 749.2c-56.9-1.8-109.9-17.9-154.9-53-71.7-56-97.9-132.6-85.1-220.5 11.1-76.7 57-132.3 125.6-165.9 55-27 114.2-32.2 172.7-9.9 45.6 17.4 70.5 53.1 52.4 106.5-11.5 33.8-35.6 57.5-64.7 76.4-34.2 22.3-70.8 37.5-112.7 34.6-40.8-2.9-59.4-33.1-43.8-71 3-7.3 7.4-14 11.2-20.9-21.1 19.5-38.3 42-44 71.3-4.7 24.7 9.3 50 32.2 58.7 21.9 8.4 44.6 11.5 67.8 8.7 75.2-9.1 140.2-40 194.6-92.8 60.1-58.3 58.9-152.2-4.2-204.7-55-45.7-118.8-71.6-190.8-73.4-81.4-2.1-156.2 18.5-220.7 70.2-64 51.5-104.5 117.8-118.6 198.8-9.9 56.8-4.6 112.8 15.9 167.3 26 69.1 68 125 130.9 164.3 87.2 54.5 180.7 64.9 278.2 36.3 87-25.5 147.3-84.3 190.9-162.1 1.4-2.5 1.8-5.6 2.7-8.4-13.2 9.1-23.9 19.9-35.9 28.8-59.3 43.8-126.4 63-199.7 60.7zM447.1 859.9c-14.5-1.7-29-4-43.2-7.2-15.2-3.4-30.1-8.2-47.3-12.9 0 21.4-0.2 41.1 0.3 60.8 0.1 2.6 3.5 6.8 6.2 7.5 18.1 4.8 36.3 9.1 54.6 12.7 3 0.6 8.5-1.6 10-4.2 9-15.1 17.1-30.6 25.5-46 3.6-6.7 2.2-9.7-6.1-10.7zM200.2 809.6c-1.1 2.5 0.7 7.9 2.9 9.8 14.3 12.2 29.1 24 44 35.5 2.3 1.8 7.3 3 9.1 1.7 17.3-12.4 34.1-25.3 51-38-27.5-22.3-53.4-43.3-81.2-65.8-8.7 18.9-17.6 37.7-25.8 56.8zM100.6 665.3c-2.1 1.9-2.8 8-1.5 10.8 7.6 16.1 15.8 32 24.5 47.6 1.6 2.9 6.6 6.3 9.4 5.8 20.7-3.7 41.3-8.3 61.1-12.4L148 625.2c-15.9 13.3-31.9 26.4-47.4 40.1z"
                  fill="#ED4201"
                />
                <path
                  data-v-35553aad=""
                  d="M928.2 349.2c-14.5-33.7-43.7-48.8-75.4-58.7-19.9-6.2-40.6-8.9-61.5-9.5-10.3-0.3-20.6-0.2-31 0.3-9.2 0.4-18.6 1.4-27.9 3.7 5 1.2 40.3 11 55.7 19 1.1 0.6 2.1 1.1 3.2 1.7 20.3 11.5 32.8 28.9 33.6 53.7 1 31.8-13.1 57.9-31.7 82-0.6 0.8-1.3 1.6-1.9 2.3-18.5 23.4-40.5 43.1-64.6 60.7-46.3 33.7-97.2 57.9-152.2 72.4-41.7 11-84.2 14.2-127.1 5-45.3-9.7-76.5-49.4-58.1-98 3.1-8.2 6.2-16.5 9.3-24.7-15.3 19.6-26.8 40.2-29.6 65.5-3.6 33.5 10.4 58.6 35.8 77.3 31.7 23.4 69.7 29.2 107.7 30.5 24.6 0.8 49.5-3.4 74.1-5.9 42.8-4.4 83.5-17 123-33.1 28.2-11.5 55.7-24.5 81.7-40 16.6-9.9 32.5-20.8 47.7-33.1 34-27.7 66.3-57.2 84.1-98.6 10.1-23.4 16-47.2 5.1-72.5z"
                  fill="#035DB6"
                /></svg
            ></span>
            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">豫ICP备2025131513号 -1</a>
          </div>
        </div>
      </div>
      <div class="like mt-5">
        <div class="title">
          <span>关于我的</span>
        </div>
        <div class="pic">
          <div class="img">
            <a href="https://gitee.com/Hyl_03" target="_blank"
              ><svg
                t="1719563252168"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7139"
                width="30"
                height="30"
              >
                <path
                  d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                  fill="#C71D23"
                  p-id="7140"
                />
              </svg>
            </a>
          </div>
          <div class="img">
            <a href="https://github.com/YL-03" target="_blank" v-cursor-pointer>
              <svg
                t="1719563210316"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6139"
                width="30"
                height="30"
              >
                <path
                  d="M512 0C229.283787 0 0.142041 234.942803 0.142041 524.867683c0 231.829001 146.647305 428.553077 350.068189 497.952484 25.592898 4.819996 34.976961-11.38884 34.976961-25.294314 0-12.45521-0.469203-45.470049-0.725133-89.276559-142.381822 31.735193-172.453477-70.380469-172.453477-70.380469-23.246882-60.569859-56.816233-76.693384-56.816234-76.693385-46.493765-32.58829 3.540351-31.948468 3.540351-31.948467 51.356415 3.71097 78.356923 54.086324 78.356923 54.086324 45.683323 80.19108 119.817417 57.072162 148.993321 43.593236 4.649376-33.91059 17.915029-57.029508 32.50298-70.167195-113.675122-13.222997-233.151301-58.223843-233.1513-259.341366 0-57.285437 19.919806-104.163095 52.678715-140.846248-5.246544-13.265652-22.820334-66.626844 4.990615-138.884127 0 0 42.996069-14.076094 140.760939 53.787741 40.863327-11.644769 84.627183-17.445825 128.177764-17.6591 43.465272 0.213274 87.271782 6.014331 128.135109 17.6591 97.679561-67.906489 140.59032-53.787741 140.59032-53.787741 27.938914 72.257282 10.407779 125.618474 5.118579 138.884127 32.844219 36.683154 52.593405 83.560812 52.593405 140.846248 0 201.586726-119.646798 245.990404-233.663158 258.957473 18.341577 16.208835 34.721032 48.199958 34.721032 97.210357 0 70.167195-0.639822 126.7275-0.639823 143.960051 0 14.033439 9.213443 30.370239 35.190235 25.209005 203.250265-69.527373 349.769606-266.123484 349.769605-497.867175C1023.857959 234.942803 794.673558 0 512 0"
                  fill="#3E75C3"
                  p-id="6140"
                />
              </svg>
            </a>
          </div>
          <div class="img">
            <a href="https://blog.csdn.net/hnsfdxweb3?spm=1000.2115.3001.5343" target="_blank">
              <svg
                t="1719563005777"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5136"
                width="30"
                height="30"
              >
                <path
                  d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z"
                  fill="#DD1700"
                  p-id="5137"
                />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<style scoped lang="scss">
footer {
  padding-top: 100px;
  background: linear-gradient(180deg, transparent 0%, #fff 25%);
  .max-w-screen-xl {
    text-align: left;
    --primary-color: #409eff;
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      // height: 50px;
      color: #666;
      font-family: "KaiTi";
      .top {
        .name {
          font-size: 16px;
          color: #666;
          span {
            background-color: var(--primary-color);
            padding: 2px 5px;
            font-size: 14px;
            color: #fff;
            border-radius: 8px;
            vertical-align: middle;
          }
        }
        .run,
        .viewNum {
          display: flex;
          align-items: center;
          margin-top: 10px;
          font-size: 14px;
          color: #999;
          .icon {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
      .bottom {
        --br: 6px;
        // flex: 1;
        display: flex;
        align-items: center;
        background-color: #fff;
        border: 1px solid #999;
        font-size: 13px;
        padding: 0;
        margin: 0;
        border-radius: var(--br);
        max-width: 250px;
        margin-top: 10px;
        background-color: var(--primary-color);
        .left {
          background-color: var(--primary-color);
          // height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          padding-left: 10px;
          border-radius: var(--br) 0 0 var(--br);
          font-size: 14px;
        }
        .right {
          display: flex;
          flex: 1;
          align-items: center;
          background-color: #515151;
          color: #fff;
          border-radius: 0 var(--br) var(--br) 0;
          svg {
            margin-right: 10px;
          }
          a {
            font-size: 12px;
            &:hover {
              color: var(--primary-color);
            }
          }
        }
      }
    }

    .like {
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 700;
        color: #999;
      }

      .pic {
        display: flex;

        .img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          // background-color: rgba(70, 152, 245, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          a {
            // cursor:
            //   var(--cursor-pointer) 50 50,
            //   pointer !important;
          }
        }
      }
    }
  }
}
</style>
